<template>
  <div>
    <div class="publicdashboard-container">
      <span class="little"></span>
      <div class="dashboard-text">公告公示</div>
    </div>
    <el-card class="publicbox-card" style="height: 150px;">
      <div class="tittlebox">
        <!-- 总数 -->
        <div class="yellowbox">
          <div class="leftbox">
            <img src="../../images/public1.png" alt="" />
          </div>
          <div class="rightbox">
            <div class="sum">{{ toppublic.sum }}</div>
            <div>总数</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 待认证 -->
        <div class="bluebox">
          <div class="leftbox">
            <img src="../../images/public2.png" alt="" />
          </div>
          <div class="rightbox">
            <div class="certified">{{ toppublic.publicsum }}</div>
            <div>公告</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 已通过-->
        <div class="redbox">
          <div class="leftbox">
            <img src="../../images/public3.png" alt="" />
          </div>
          <div class="rightbox">
            <div class="process">{{ toppublic.activesum }}</div>
            <div>公示</div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="public">
      <div>
        <el-button style="color: #fff; background-color: #4877e8; margin-left: 20px" @click="addbtn()">添加公告/公示</el-button>
      </div>
      <div class="publictable-container">
        <el-table :data="tableData" style="width: 100%" :border="false" :show-overflow-tooltip="false" stripe
          class="bigtable">
          <el-table-column type="index" label="序号" width="70px" :index="indexMethod">
          </el-table-column>
          <el-table-column label="标题" prop="status" width="300px">
            <template slot-scope="{ row }">
              {{ row.title }}
            </template>
          </el-table-column>
          <el-table-column label="来源">
            <template slot-scope="{ row }">
              {{ row.source }}
            </template>
          </el-table-column>
          <el-table-column label="类型" width="60px">
            <template slot-scope="{ row }">
              {{ getType(row.type) }}
            </template>
          </el-table-column>
          <el-table-column label="留言时间">
            <template slot-scope="{ row }">
              {{ row.gmtCreate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="是否发布">
            <template slot-scope="{ row }">
              <el-switch @change="handleChange(row.id, row.publishStatus)" v-model="row.publishStatus"
                active-color="#13ce66" inactive-color="#E7E9EE" :active-value="1" :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="是否置顶">
            <template slot-scope="{ row }">
              <el-switch @change="handleChangetop(row.id, row.topStatus)" v-model="row.topStatus"
                active-color="#13ce66" inactive-color="#E7E9EE" :active-value="1" :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <a size="mini" type="primary" @click="handleEdit(scope.row.id)" style="
                  display: inline-block;
                  width: 52px;
                  height: 24px;
                  color: #216cff;
                  font-size: 16px;
                  font-weight: 500;
                  margin-right: 10px;
                  margin-left: 10px;
                " v-if="scope.row.status === '待回复'">回复</a>
              <a size="mini" type="danger" @click="handleDelete(scope.row.id)" style="
                  display: inline-block;
                  width: 52px;
                  height: 24px;
                  color: #575757;
                  font-size: 16px;
                  font-weight: 500;
                ">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination background align="center" class="footerpage" layout="prev, pager, next"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="currentPage"
        :page-size="pageSize">
      </el-pagination>
      <publicdialog ref="mydialogopen" />
    </el-card>
  </div>
</template>

<script>
import publicdialog from "@/views/announcement/components/addpublic.vue";
import {
  getsum,
  getpublicsum,
  getcountPublicity,
  getList,
  deleteById,
  changePublicstatus,
  pubtop
} from "@/api/announcement";
import { get } from "js-cookie";
export default {
  components: {
    publicdialog,
  },
  data() {
    return {
      // 公告栏
      toppublic: {
        sum: "",
        publicsum: "",
        activesum: "",
      },
      form: {
        input: "",
      },

      tableData: [],
      currentPage: 1, // 当前页码
      // total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
      total: 0, //总数
      selectedUserId: null, // 存储选定用户的唯一ID
      adminId: this.$store.state.user.userInfo.id,
      username: this.$store.state.user.userInfo.username,
    };
  },
  computed: {
    typeMap() {
      return {
        0: "公告",
        1: "公示",
      };
    },

    indexMethod: function () {
      return (this.currentPage - 1) * (this.pageSize) + 1
    }
  },
  created() {
    this.getsum();
    this.getpublicsum();
    this.getcountPublicity();
    this.getList();
  },
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getList();
    },
    // 删除用户id
    handleDelete(id) {
      this.$confirm("确定删除此项公告?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteById({ id: id }).then((res) => {
          if (res.data.state === 20000) {

            this.$message({
              type: "success",
              message: "删除成功!",
            });
            if (this.tableData.length == 1 && this.currentPage != 1) {
              this.currentPage--
            }
            this.getList();
            // this.getList();
            this.getsum();
            this.getpublicsum();
            this.getcountPublicity();
          } else {
            this.$message.error('删除失败请稍后重试')
            this.getList();
            this.getsum();
            this.getpublicsum();
            this.getcountPublicity();
          }
        });
      });
    },
    addbtn() {
      // console.log(111);
      this.$refs.mydialogopen.opendialog();
    },
    // 公告公示总数
    getsum() {
      getsum().then((res) => {
        this.toppublic.sum = res.data.data;
        // this.total = res;
      });
    },
    // 公告总数
    getpublicsum() {
      getpublicsum().then((res) => {
        this.toppublic.publicsum = res.data.data;
      });
    },
    // 公示总数
    getcountPublicity() {
      getcountPublicity().then((res) => {
        this.toppublic.activesum = res.data.data;
      });
    },
    // 获取表格数据
    getList() {
      getList({ page: this.currentPage, size: this.pageSize }).then((res) => {
        // console.log(res.records[0].id);
        // const { records } = res;
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        console.log(this.tableData);
      });
    },
    // 转换公告公示
    getType(type) {
      return this.typeMap[type] || "";
    },
    // 是否发布滑动块状态
    handleChange(id, publishStatus) {
      changePublicstatus({ id: id, publishStatus: publishStatus, adminId: this.adminId, username: this.username }).then(res => {
        if (res.data.state === 20000) {
          this.$message.success('操作成功')
        } else {
          this.$message.error('操作失败，请稍后重试')
        }
      });
    },
    handleChangetop(id,topStatus){
      pubtop({id: id,topStatus: topStatus}).then(res=>{
        if(res.data.state===20000){
          this.$message.success('操作成功')
        }else{
          this.$message.error(res.data.message)
        }
      })
    }
  },
};
</script>

<style lang="scss">
.publicdashboard-container {
  display: flex;
  padding: 10px 26px 8px 26px;

  .little {
    display: inline-block;
    width: 5px;
    height: 20px;
    background: #3064fc;
    margin-right: 6px;
  }

  .dashboard-text {
    font-size: 16px;
  }
}

.publicbox-card {
  margin-top:-2px;
  width: 99%;
  height: 130px;
  margin-left: 8px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;

  .tittlebox {
    display: flex;
    justify-content: space-between;

    .yellowbox,
    .bluebox,
    .redbox,
    .greenbox {
      display: flex;
      justify-content: center;
      align-items: center;

      .rightbox {
        :nth-child(2) {
          width: 48px;
          height: 16px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #2e2e2e;
          // line-height: 10px;
        }
      }

      .sum {
        font-weight: bold;
        color: #fabc00;
      }

      .certified {
        font-weight: bold;
        color: #1e6ceb;
      }

      .process {
        font-weight: bold;
        color: #f46e3e;
      }

      .noprocess {
        font-weight: bold;
        color: #31a952;
      }
    }
  }
}

.dashedbox {
  display: inline-block;
  margin-top:34px;
  height: 20px;
  width: 1px;
  border: 1px solid #eaedf2;
  margin-right: 30px;
  margin-left: 2px;
  // width: 10px;
}

.public {
  margin-top: 10px;
  width: 99%;
  max-height: 100%;
  margin-left: 8px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
}

.publictable-container {
  margin-top: 10px;
}

.publictable-container .el-table__header th {
  color: #216cff;
  font-size: 16px;
  background-color: #f3f6fb;
  /* border: 1px solid #e5e5e3; */
  text-align: center;
}

.publictable-container .el-table__body td {
  /* border: 1px solid #ddd; */
  text-align: center;
  font-weight: bold;
}

/* 三种状态的不同显示颜色 */
.blue-text {
  color: #2675c0;
}

.green-text {
  color: #31a952;
}

.red-text {
  color: #f46e3e;
}

.footerpage {
  margin-top: 40px;
}
</style>